<!-- 添加编辑合作医院 -->
<!-- 编辑新闻 -->

<template>
    <div class='bgff pd pt10 pm10'>
        <div class=" ">
            <n-button type="primary" size="medium" @click="addNews">{{ isbj ? '编辑' : '添加' }}医院</n-button>
            <n-button class="ml20" type="primary" size="medium" @click="callBack">返回</n-button>
        </div>
        <div class="mt20">
            <n-form ref="formRef" label-placement="left" label-width="auto" :model="formValue" :rules="rules" :style="{
                maxWidth: '640px'
            }">
                <n-form-item label="医院标题:" path="title">
                    <n-input v-model:value='formValue.title' placeholder="输入医院标题" />
                </n-form-item>
      
                <n-form-item label="封面:" path="cover">
                    <div class="cover-context vertical-center" @click="photoShowModal = true">
                        <img :src="formValue.cover" v-if="formValue.cover" class="w100 h100 imgjz" />
                        <i class="iconfont dx-24gl-pictures fz32" v-else></i>
                    </div>
                </n-form-item>
                <n-form-item label="logo:" path="logo">
                    <div class="cover-context vertical-center logo" @click="photoShowModaler = true">
                        <img :src="formValue.logo" v-if="formValue.logo" class="w100 h100 imgjz" />
                        <i class="iconfont dx-24gl-pictures fz32" v-else></i>
                    </div>
                </n-form-item>
                <n-form-item label="医院地址:">
                   <div class="display-flex">
                    <div class="flex-1 mr10">
                        <n-select v-model:value="formValue.province" size="medium" :options="akjaa" clearable @change="shhgera"/>
                    </div>
                    <div class="flex-1 ml10 mr10">
                        <n-select v-model:value="formValue.city" size="medium" :options="akjab" clearable @change="shhgerb"/>
                    </div>
                    <div class="flex-1 ml10">
                        <n-select v-model:value="formValue.district" size="medium" :options="akjac" clearable />
                    </div>
                   </div>
                   <n-input v-model:value='formValue.detailedAddress' placeholder="详细地址" class="mt10" />
                </n-form-item>
            </n-form>
        </div>
        <p class="mb10">医院详情：</p>
        <div class="fwbclass">
            <tinymce ref="tinymceref"></tinymce>
        </div>


        <n-modal v-model:show="photoShowModal" preset="card" class="Stock-diagnosis">
            <template #header>
                <div>医院封面</div>
            </template>
            <div>
                <photoGallery @getImg="getImg" types="医院封面"></photoGallery>
            </div>
            <template #action>
                <div class="tr">
                    <n-button @click="photoShowModal = false"> 取消 </n-button>
                    <n-button class="ml10" type="info" @click="setImg"> 确定 </n-button>
                </div>
            </template>
        </n-modal>
        <n-modal v-model:show="photoShowModaler" preset="card" class="Stock-diagnosis">
            <template #header>
                <div>医院logo</div>
            </template>
            <div>
                <photoGallery @getImg="getImger" types="医院logo"></photoGallery>
            </div>
            <template #action>
                <div class="tr">
                    <n-button @click="photoShowModaler = false"> 取消 </n-button>
                    <n-button class="ml10" type="info" @click="setImger"> 确定 </n-button>
                </div>
            </template>
        </n-modal>
    </div>
</template>
<script lang='ts' setup>
import { ref, onMounted } from "vue";
import tinymce from "../../../components/util/tinymce.vue"
import photoGallery from "../../../components/util/photoGallery";
import { callBack, dxpost, qurl, dxget } from "../../../util/index"
import { types } from "../public/index";
const cz = qurl()
const formRef = ref()
const tinymceref = ref()
const isbj = ref(false) // 是否为编辑状态
const photoShowModal = ref(false)
const photoShowModaler = ref(false)
const formValue = ref({
    title: "",
    cover: "",
    logo:"",
    publisher: localStorage.Userid,
    particulars: "",
    province:"",
    city:"",
    district:"",
    detailedAddress:""
})
const akjaa = ref()
const akjab = ref()
const akjac = ref()

const songs = types
const rules = {
    title: {
        required: true,
        message: '输入合作医院标题',
        trigger: 'blur'
    }
}
const addNews = (e) => {
    e.preventDefault();
    formRef.value.validate((errors) => {
        if (!errors) {
            addNes()
        }
    });
}
let jjnmnxe = "";
const getImg = (data) => {
    jjnmnxe = data;
};
const setImg = () => {
    formValue.value.cover = jjnmnxe;
    photoShowModal.value = false;
};

let jjnmnxeer = "";
const getImger = (data) => {
    jjnmnxeer = data;
};
const setImger = () => {
    formValue.value.logo = jjnmnxeer;
    photoShowModaler.value = false;
};
const addNes = async () => {
    formValue.value.particulars = tinymceref.value.getContent()
    formValue.value['detailedbrief'] = tinymceref.value.gettext().trim().slice(0,100)
    const { errno, data }: any = await dxpost("djhs/djPartnerHospital", formValue.value, isbj.value ? 'put' : 'post')
    if (errno == 0) {
        window.$message.success('操作成功！')
        callBack()
    }
}
const getNews = async () => {
    const { data }: any = await dxget("djhs/djPartnerHospital", { id: cz.id })
    tinymceref.value.setContent(data.particulars)
    formValue.value = data
}
if (cz.id) {
    isbj.value = true
    getNews()
}

// 获取省市区
const getssqAddress = async (obj?) => {
  let { data }: any = await dxget("public/area", obj);
 return  data
};
const shhgera = async(e)=>{
    formValue.value.city = ""
    formValue.value.district = ""
    akjab.value = await getssqAddress({type:1,code:e})
}
const shhgerb= async(e)=>{
    formValue.value.district = ""
    akjac.value = await getssqAddress({type:2,code:e})
}
const inits = async()=>{
    akjaa.value = await getssqAddress()
    akjab.value = await getssqAddress({type:1,code:formValue.value.province})
    akjac.value = await getssqAddress({type:2,code:formValue.value.city})
}
inits()

</script>
<style scoped>
.fwbclass {
    height: 600px;
}

.cover-context {
    width: 300px;
    height: 150px;
    border-radius: 4px;
    border: 1px dashed #e0e0e0;
    cursor: pointer;
}
.cover-context.logo{
    width: 150px !important;
    height: 75px !important;
}
</style>